<template>
    <view class="container">
        <!-- 搜索框 -->
        <view class="search-box">
            <input v-model="searchKeyword" placeholder="输入搜索地址" @input="searchAddress" />
            <button @click="searchAddress">搜索</button>
        </view>
        <!-- 百度地图展示 -->
        <view id="selectMap" style="width: 100%; height: 50vh;"></view>
        <!-- 位置列表 -->
        <view class="location-list">
            <view v-for="(place, index) in nearbyPlaces" :key="index" @click="selectPlace(place)">
                <text>{{ place.name }}</text>
            </view>
        </view>
        <!-- 确认按钮 -->
        <view class="confirm-button">
            <button @click="confirmLocation">确认</button>
        </view>
    </view>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue';

const { props } = getCurrentInstance();
console.log(JSON.stringify(props)+"--------");

const searchKeyword = ref('');
const nearbyPlaces = ref([]);
const selectedPlace = ref(null);
const map = ref(null);

// 初始化地图
const initMap = () => {
    const latitude = Number(props.latitude);
    const longitude = Number(props.longitude);
    map.value = new BMap.Map('selectMap');
    const point = new BMap.Point(longitude, latitude);
    map.value.centerAndZoom(point, 15);
    map.value.addControl(new BMap.NavigationControl());
	
	console.log(props.latitude+"--------");
	console.log(longitude+"--------");

    // 监听地图点击事件
    map.value.addEventListener('click', (e) => {
        selectedPlace.value = {
            latitude: e.point.lat,
            longitude: e.point.lng,
            name: `经纬度: ${e.point.lat}, ${e.point.lng}`
        };
    });

    // 获取周边地址
    getNearbyPlaces(point);
};

// 获取周边地址
const getNearbyPlaces = (point) => {
    const local = new BMap.LocalSearch(map.value, {
        renderOptions: { map: map.value },
        onSearchComplete: (results) => {
            if (local.getStatus() === BMAP_STATUS_SUCCESS) {
                const places = [];
                for (let i = 0; i < results.getCurrentNumPois(); i++) {
                    const poi = results.getPoi(i);
                    places.push({
                        name: poi.title,
                        latitude: poi.point.lat,
                        longitude: poi.point.lng
                    });
                }
                nearbyPlaces.value = places;
                console.log('获取周边地址成功:', nearbyPlaces.value); // 添加日志输出
            } else {
                console.error('获取周边地址失败:', local.getStatus()); // 添加错误处理和日志输出
            }
        }
    });
    local.searchNearby('', point, 1000); // 搜索半径 1000 米内的地址
};

// 搜索地址
const searchAddress = () => {
    if (searchKeyword.value) {
        const local = new BMap.LocalSearch(map.value, {
            renderOptions: { map: map.value },
            onSearchComplete: (results) => {
                if (local.getStatus() === BMAP_STATUS_SUCCESS) {
                    const places = [];
                    for (let i = 0; i < results.getCurrentNumPois(); i++) {
                        const poi = results.getPoi(i);
                        places.push({
                            name: poi.title,
                            latitude: poi.point.lat,
                            longitude: poi.point.lng
                        });
                    }
                    nearbyPlaces.value = places;
                    console.log('搜索地址成功:', nearbyPlaces.value); // 添加日志输出
                } else {
                    console.error('搜索地址失败:', local.getStatus()); // 添加错误处理和日志输出
                }
            }
        });
        local.search(searchKeyword.value);
    } else {
        // 如果搜索关键词为空，重新获取周边地址
        const point = new BMap.Point(Number(props.longitude), Number(props.latitude));
        getNearbyPlaces(point);
    }
};

// 选择位置
const selectPlace = (place) => {
    selectedPlace.value = place;
};

// 确认位置
const confirmLocation = () => {
    if (selectedPlace.value) {
        const eventChannel = getCurrentPages()[getCurrentPages().length - 1].getOpenerEventChannel();
        eventChannel.emit('returnLocation', {
            address: selectedPlace.value.name,
            latitude: selectedPlace.value.latitude,
            longitude: selectedPlace.value.longitude
        });
        navigateBack();
    }
};

onMounted(() => {
    initMap();
});
</script>

<style scoped>
.container {
    padding: 10px;
}

.search-box {
    display: flex;
    margin-bottom: 10px;
}

.search-box input {
    flex: 1;
    border: 1px solid #ccc;
    padding: 5px;
    border-radius: 3px;
}

.search-box button {
    margin-left: 10px;
}

.location-list {
    margin-top: 10px;
}

.location-list view {
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

.confirm-button {
    margin-top: 20px;
    text-align: center;
}

.confirm-button button {
    width: 100%;
}
</style>